<template>
  <div>
    <div class="mb-10px">
      <InputSearch
        v-model:value="selectReq.tenant_name"
        placeholder="请输入企业名称"
        enter-button
        @search="fetchTenantList"
        style="width: 240px"
      />
    </div>
  </div>
  <div>
    <div>
      <Table
        class="main-table"
        sticky
        :bordered="true"
        :dataSource="tenantList"
        :columns="columns"
        :pagination="false"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <div v-per="'update'">
              <Popconfirm
                v-if="tenantList.length"
                title="是否确认删除?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="handleDelete(record)"
              >
                <a><DeleteOutlined /></a>
              </Popconfirm>
            </div>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        show-size-changer
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Table, Popconfirm, InputSearch, Pagination } from 'ant-design-vue';
import { deleteSaaSTenant, getSaaSTenantList } from '/@/api/tenant-mgmt/tenant';
import { reactive, ref, watch } from 'vue';
import { columns } from './enterprise.data';
import { SaaSTenantListItem } from '/@/api/tenant-mgmt/model/tenantModel';
import { useMessage } from '/@/hooks/web/useMessage';
import { DeleteOutlined } from '@ant-design/icons-vue';

const scroll = ref<undefined | object>(undefined);
const { createMessage } = useMessage();
const loading = ref(true);
let tenantList = ref<SaaSTenantListItem[]>([]);
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let selectReq = reactive({
  current: current.value,
  size: pageSize.value,
  // eslint-disable-next-line camelcase
  tenant_name: '',
});

async function fetchTenantList() {
  try {
    let res = await getSaaSTenantList(selectReq);

    tenantList.value = res.items;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
}
fetchTenantList();
const onShowSizeChange = (current: number, pageSize: number) => {
  selectReq.size = pageSize;
  selectReq.current = current;
  fetchTenantList();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }

  selectReq.size = pageSize.value;
});
watch(current, () => {
  selectReq.current = current.value;
  fetchTenantList();
});

async function handleDelete(record: SaaSTenantListItem) {
  try {
    const res = await deleteSaaSTenant({ id: record.id });
    if (res === '删除企业信息成功') {
      createMessage.success('删除企业成功！');
    } else {
      createMessage.error('删除企业失败！');
    }
  } catch (e) {
    createMessage.error('删除企业失败：' + e);
  }
  fetchTenantList();
}
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
